<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leGUESS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/main.css">

</head>

<body>
    <div class="header">
        <div class="title">leGUESS</div>
        <div class="info">
            <div class="info-label">游戏简介:</div>
            <div class="info-content">
                <div>1. 游戏有三种模式：猜素数个数、猜奇数个数和猜奇数和偶数哪个比较多</div>
                <div>2. 发起挑战一方可支付一定数量的NAS，接受挑战一方需支付同等数量NAS</div>
                <div>3. 猜测更接近答案一方获得全部NAS，双方均猜对或猜错的话NAS将自动退回</div>
            </div>
        </div>
    </div>
    <div class="content" id="content">
        <div class="toolbar">
            <div class="toolbar-left">
                <div class="label color-blue">所有挑战</div>
                <div class="label">我的</div>
            </div>
            <div class="toolbar-right">
                <div class="type bg-gray" v-on:click="filterType(0)">全部</div>
                <div class="type bg-blue-dark" v-on:click="filterType(1)">猜素数</div>
                <div class="type bg-blue" v-on:click="filterType(2)">猜奇数</div>
                <div class="type bg-blue-light" v-on:click="filterType(3)">猜奇偶</div>
            </div>
        </div>
        <div class="guess-area">
            <div class="guess" v-for="(guess, index) in guesses" v-bind:class="guessClass(index)" v-show="showType.length == 0 || showType.indexOf(guess.type) > -1">
                <div class="status" v-show="!isAll">{{ guess.status }}</div>
                <div class="type">{{ guess.type }}</div>
                <div class="aguess">
                    <span>已猜：</span>{{ guess.guess }}
                    <span>{{ guess.unit }}</span>
                </div>
                <div class="amount">{{ guess.amount }}
                    <span class="unit">NAS</span>
                </div>
            </div>
            <div class="add">
                <img src="../imgs/add.png" />
                <div class="challenge">发起挑战</div>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
</body>

</html>